<template>
  <div class="data-board">
    <div>
      <a-card :bordered="false">
        <Bill :detailsInfo="detailsInfo" :datailId="proId"/>
        <div class="gap"></div>
        <!-- <div>
          <template v-if="$auth('PROJECT_BOARD.OVERALL_BUDGET')">
            <GeneralBudget></GeneralBudget>
            <div class="gap"></div>
          </template>
          <template v-if="haveCenterPaymentAuth">
            <ResearchCenterPayment></ResearchCenterPayment>
            <div class="gap"></div>
          </template>
        </div> -->
        <template v-if="$auth('PROJECT_BOARD.EXPENSE_DETAIL_PATIENT')">
          <ExpenseDetailsBoard
            ref="subjectBoard"
            :data="subjectData"
            :listVisitStageOption="listVisitStageOption"
            :tableColumns="SUBJECT_TABLE_COLUMNS"
            :researchCenterOptions="researchCenterOptions"
            @switchCenter="handleSubjectSwitchCenter"
            type="2"
          >
          </ExpenseDetailsBoard>
          <div class="gap"></div>
        </template>
        <ExpenseDetailsBoard
          v-if="$auth('PROJECT_BOARD.EXPENSE_DETAIL_RESEARCHER')"
          ref="researchBoard"
          :data="researchData"
          :listVisitStageOption="listVisitStageOption"
          :tableColumns="RESEARCH_TABLE_COLUMNS"
          :researchCenterOptions="researchCenterOptions"
          @switchCenter="handleResearchSwitchCenter"
          type="1"
        >
        </ExpenseDetailsBoard>
      </a-card>
    </div>
  </div>
</template>

<script>
import Bill from '@/views/overview/detail/responsible/components/bill'
// import GeneralBudget from './components/general-budget.vue'
// import ResearchCenterPayment from './components/research-center-payment.vue'
import ExpenseDetailsBoard from './components/expense-details-board.vue'
import { SUBJECT_TABLE_COLUMNS, RESEARCH_TABLE_COLUMNS } from './config/config.js'
import { unreactive } from '@/utils/util'
import { apiGetAllCenter } from '@api/cost/cost'
import { mapGetters } from 'vuex'
import { apiGetExpenseDetailData, listVisitStage } from '@api/dashboard/dashboard'
import { getProjectDetail } from '@/api/overview/contract'

export default {
  name: 'data-board',
  components: {
    ExpenseDetailsBoard,
    // ResearchCenterPayment,
    // GeneralBudget,
    Bill
  },
  data () {
    return {
      SUBJECT_TABLE_COLUMNS: unreactive(SUBJECT_TABLE_COLUMNS),
      RESEARCH_TABLE_COLUMNS: unreactive(RESEARCH_TABLE_COLUMNS),
      subjectData: {
        type: 'subject',
        typeStr: this.$t('all.autotext446'),
        detailedData: []
      },
      researchData: {
        type: 'research',
        typeStr: this.$t('all.autotext1096'),
        detailedData: []
      },
      researchCenterOptions: [],
      resId: '',
      subjectResId: '',
      researchResId: '',
      subjectStageId: '',
      researchStageId: '',
      subjectApplyType: '',
      researchApplyType: '',
      stageId: '',
      applyType: '',
      listVisitStageOption: [],
      detailsInfo: {}
    }
  },
  computed: {
    ...mapGetters({
      project: 'project'
    }),
    proId () {
      return localStorage.getItem('CURRENT_PROID') || ''
    },
    haveCenterPaymentAuth () {
      return this.$auth('PROJECT_BOARD.PAY_SITUATION_PATIENT') || this.$auth('PROJECT_BOARD.PAY_SITUATION_RESEARCHER')
    }
  },
  created () {
    this.listVisitStage()
    this.getResearchCenterList()
    this.getExpenseDetailData()
  },
  methods: {
    // todo 获取研究中心左侧列表
    getResearchCenterList () {
      return apiGetAllCenter({ proId: this.proId }).then(res => {
        this.researchCenterOptions = res
      })
    },
    getExpenseDetailData () {
      this.getSubjectData()
      this.getResearchData()
    },
    getSubjectData () {
      const params = {
        proId: localStorage.getItem('CURRENT_PROID') || '',
        type: this.$const.COMMON_ROLE_TYPE.TESTEE.value,
        resId: this.subjectResId,
        stageId: this.subjectStageId,
        applyType: this.subjectApplyType
      }
      return apiGetExpenseDetailData(params).then(res => {
        this.subjectData.detailedData = res || {}
      })
    },
    getResearchData () {
      const params = {
        proId: localStorage.getItem('CURRENT_PROID') || '',
        type: this.$const.COMMON_ROLE_TYPE.RESEARCHER.value,
        resId: this.researchResId,
        stageId: this.researchStageId,
        applyType: this.researchApplyType
      }
      return apiGetExpenseDetailData(params).then(res => {
        this.researchData.detailedData = res || {}
      })
    },
    detailsList () {
      getProjectDetail({
        id: localStorage.getItem('CURRENT_PROID') || ''
      }).then(res => {
        this.detailsInfo = res
        this.$store.commit('UPDATE_PROJECT', res)
        // this.updateProjectInfoInVuex(res)
        // const { protocolNo, name, status, stage, budget, no, contractNo, buildTime, createrId, businessName, serviceCharge, serviceChargePercent } = res
        // const sponsorIds = res.sponsorIds.split(',').map(Number) // 注：后端返回的是个字符串需将其转为数组(split分割后是个string数组，map方法将其转为number数组)
        // const receiver = res.receiver ? res.receiver.split(',').map(Number) : []
        // this.editContent = { protocolNo, name, sponsorIds, status, stage, budget, no, contractNo, buildTime, createrId, businessName, serviceCharge, serviceChargePercent, receiver }
        // this.editContent.buildTime = moment(this.editContent.buildTime).format('YYYY-MM-DD')
      })
    },
    // 获取访视阶段
    async listVisitStage () {
      const res = await listVisitStage({ proId: localStorage.getItem('CURRENT_PROID') })
      this.listVisitStageOption = res
    },
    handleResearchSwitchCenter (resId, stageId, applyType) {
      this.$message.info(this.$t('all.autotext485'))
      this.researchResId = resId
      this.researchStageId = stageId
      this.researchApplyType = applyType
      this.getResearchData()
    },
    handleSubjectSwitchCenter (resId, stageId, applyType) {
      this.$message.info(this.$t('all.autotext485'))
      this.subjectResId = resId
      this.subjectStageId = stageId
      this.subjectApplyType = applyType
      this.getSubjectData()
    }
  }
}
</script>

<style scoped lang='less'>
.data-board {
  min-width: 800px;
}
.gap {
  height: 40px;
}

</style>
